<template>
  <view class="box">
    <!-- 顶部头像 基本信息 -->
    <view class="top"><task-top-details :avatar="avatar" :nickName="nickName" :state="state"></task-top-details></view>

    <view class="other">
      <!-- 可接单和进行中tab栏 -->
      <view class="tab"><base-tab-list class="tab" :otherStyle="customStyle" :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></base-tab-list></view>

      <!-- 可接单列表 -->
      <view class="content">
        <scroll-view class="left" v-if="tabIndex == 0" scroll-y="true">
          <view v-for="(item, index) in orderListData">
            <general-tasks
              @acceptList="acceptList"
              @refuseList="refuseList"
              titleDec="任务分派"
              :tabIndex="tabIndex"
              :equipmentModel="item.machineModelNumber"
              :faultDec="item.faultTypeName"
              :repairAreaDec="item.address.district.name"
              :contactNumberDec="item.user.phone"
              :orderId="item.id"
              :otherStyle="marginStyle"
            ></general-tasks>
          </view>
        </scroll-view>

        <!-- 维修进行中列表 -->
        <scroll-view class="right" v-if="tabIndex == 1" scroll-y="true">
          <view v-for="(item, index) in inProgressData">
            <general-tasks
              titleDec="任务详情"
              :tabIndex="tabIndex"
              @viewDetails="viewDetails"
              :taskState="item.stateName"
              :equipmentModel="item.machineModelNumber"
              :faultDec="item.faultTypeName"
              :repairAreaDec="item.address.district.name"
              :contactNumberDec="item.user.phone"
              :orderId="item.id"
              :machineModelNumber="item.machineModelNumber"
              :otherStyle="marginStyle"
            ></general-tasks>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config'; // 导入配置文件
// 基本路径
const baseURL = config.baseURL;

export default {
  data() {
    return {
      tabList: [
        {
          label: '可接单'
        },
        {
          label: '进行中'
        }
      ],

      tabIndex: 0,
      customStyle: {
        justifyContent: 'space-around' // 传递自定义的样式属性对象
      },
      marginStyle: {
        marginTop: '50rpx' // 使用驼峰式命名，并去掉分号
      },
      clickLabel: ''
    };
  },
  props: {
    orderListData: {
      type: Array,
      default: () => []
    },
    inProgressData: {
      type: Array,
      default: () => []
    },
    avatar: {
      type: String,
      default: ''
    },
    nickName: {
      type: String,
      default: ''
    },
    state: {
      type: String,
      default: ''
    }
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index; // 更新标签索引

      this.clickLabel = this.tabList[index].label;

      this.$emit('getTabIndex', index);
    },
    acceptList(orderId) {
      this.$emit('acceptOrder', orderId);
    },
    refuseList(orderId) {
      this.$emit('refuseOrder', orderId);
    },
    viewDetails(orderId, taskState, machineModelNumber) {
      this.$emit('viewOrderDetails', orderId, taskState, machineModelNumber);
    }
  },
  onLoad() {},
  created() {
    console.log(this.avatar);
  }
};
</script>

<style lang="scss">
page {
  background-color: #333333;
}

.box {
  // background-color: #333333;
  height: 100vh;

  .top {
    background-color: antiquewhite;
    width: 100vw;
    height: 150rpx;
    position: fixed;
    top: 0;
    left: 0;
  }

  .other {
    position: fixed;
    top: 150rpx;
    left: 0;
    height: calc(100% - 150rpx);
    // background-color: #333333;

    .tab {
      // background-color: #aaaa7f;
      width: 100vw;
      height: 90rpx;
    }

    .content {
      // background-color: #ffaaff;
      margin-top: 30rpx;
      height: 1000rpx;
      width: 100vw;

      .left {
        height: 900rpx;
        width: 100vw;
      }

      .right {
        height: 900rpx;
        width: 100vw;
      }
    }
  }
}
</style>
